<template>
  <div
    :class="[fullScreen?'full-screen':'']"
    class="pro-crm-home-entry"
  >
    <div class="page_content">
      <p class="header">
        {{ lang == 'zh_CN' ? '常用菜单' : 'Common menu' }}
        <i
          @click="fullScreen=!fullScreen"
          :class="`jeicon jeicon-${fullScreen ? 'minus':'max'}`"
        />
      </p>
      <div class="entry_box">
        <div
          v-for="(menu, index) in menuData"
          :key="index"
          @click="openFuncById(menu.id)"
        >
          <div
            :style="{ background: menu.bgcolor }"
            class="icon_wrp"
          >
            <i :class="menu.iconCls" />
          </div>
          <p>{{ menu.text }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'HomeEntry',
  data() {
    return {
      fullScreen: false,
      lang: JE.getCookies('je-local-lang') || 'zh_CN',
      menuData: [],
      colorlist: JE.getDicItems('JE_MENU_BGCOLOR'),
      firstClick: true,
    };
  },
  created() {
    // 构建JE._MENUS的数据
    JE.buildMenu();
    this.init();
  },
  methods: {
    // 查询快捷入口
    init() {
      const that = this;
      let rows = [];
      let utilRows = [];
      rows = JE.ajax({
        url: JE.getUrlMaps('je.core.rbac.rbac.load'),
        params: {
          tableCode: 'JE_CORE_KJMENU',
          whereSql: ` and KJMENU_YHUD='${JE.currentUser.userId}'`,
          orderSql: ' order by SY_ORDERINDEX',
          j_query: Ext.encode({
            custom: [
              { type: '=', code: 'KJMENU_YHUD', value: JE.currentUser.userId },
            ],
            order: [
              { type: 'asc', code: 'SY_ORDERINDEX' },
            ],
          }),
          limit: -1,
        },
      }).rows;
      // debugger;
      utilRows = new Ext.util.MixedCollection();
      Ext.each(rows, (menu) => {
    		utilRows.add(menu.KJMENU_CDID, {
    			id: menu.JE_CORE_KJMENU_ID,
    			menuId: menu.KJMENU_CDID,
    			userId: menu.KJMENU_YHUD,
    			index: menu.SY_ORDERINDEX,
    		});
      });
      rows = utilRows.items;
      let menus = [];
      Ext.each(rows, (rec) => {
        if (JE._MENUS[rec.menuId]) {
          menus.push(rec);
        }
      });
      if (JE.isEmpty(menus)) {
        menus = this.initDefaultShortMenu();
      }
    	Ext.each(menus, (menu, i) => {
        const id = menu.KJMENU_CDID || menu.menuId;
        const func = JE._MENUS[id];
        if (func) {
          that.menuData.push(
            {
              id: func.id,
              text: func.text,
              code: func.code,
              iconCls: func.iconCls,
              index: i,
              dataId: menu.JE_CORE_KJMENU_ID,
              bgcolor: func.bean.MENU_BGCOLOR,
            },
          );
        }
      });
      this.menuData.forEach((menu, mindex) => {
        if (!menu.bgcolor) {
          menu.bgcolor = this.colorlist[mindex % this.colorlist.length].code;
        }
        if (!menu.iconCls) {
          menu.iconCls = 'fa fa-circle-o';
        }
      });
    },
    // 快捷菜单的默认值
    initDefaultShortMenu() {
      const that = this;
      let menus = [];
      if (JE.isNotEmpty(JE._MENUS4SHORT)) {
        const obj = JE.ajax({
          url: JE.getUrlMaps('je.core.rbac.rbac.insertUpdateList'),
          params: {
            tableCode: 'JE_CORE_KJMENU',
            strData: Ext.encode(JE._MENUS4SHORT),
          },
        });
        if (obj.success) {
          menus = obj.obj;
        }
      }
      return menus;
    },
    openFuncById(id) {
      JE.openFuncById(id, { topMenu: true });
    },
  },
};
</script>

<style lang="less" scoped>
  .pro-crm-home-entry {
    p {
      margin: 0;
    }
    .page_content {
      background: #ffffff;
      padding: 0 20px 10px;
      position: relative;
      overflow: hidden;
      .header {
        border-bottom: 1px solid #f5f5f5;
        color: #797979;
        padding: 10px 0;
        font-size: 14px;
        font-weight: 500;
        > i {
          cursor: pointer;
          color: #cccccc;
          font-size: 12px;
          float: right;
          position: relative;
          right: 10px;
          top: 5px;
          &:hover {
            color: #2f6bcf;
          }
        }
      }
      .entry_box {
        overflow-y: auto;
        height: 357px;
        padding-bottom: 20px;
        > div {
          float: left;
          width: 125px;
          padding: 10px 0;
          margin-top: 17px;
          height: 95px;
          cursor: pointer;
          > .icon_wrp {
            border-radius: 100%;
            width: 48px;
            height: 48px;
            margin: 0 auto;
            position: relative;
            box-shadow: 0 0 10px rgba(0, 0, 0, .2);
            > i {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 22px;
              color: #ffffff;
            }
          }
          > p {
            width: 100%;
            text-align: center;
            color: #797979;
            margin-top: 10px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            overflow: hidden;
            /* autoprefixer:off */
            -webkit-box-orient: vertical;
            /* autoprefixer:on */
          }
        }
        &:after {
          content: '';
          display: block;
          clear: both;
        }
      }
    }
    &.full-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 100;
      animation: unset;
      background: #f0f2f5;
      .page_content {
        background: #ffffff;
        position: relative;
        width: 1250px;
        margin: 0 auto;
        height: 100%;
        .header {
          padding-top: 30px;
        }
      }
    }
  }
</style>
